/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    FlatList,
    SectionList,
} from 'react-native';

export default class TestDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                </Text>
            </View>
        );
    }
}

//******************************************************************************************//
class Bananas extends Component {
    render() {
        let pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };
        return (
            <Image source={pic} style={{width: 200, height: 100}}/>
        );
    }
}

//*************************************************************************************************//
//属性 Props
//自定一个组件继承 Component
//这个组件的自定属性name，（name是属性名）
class Greeting extends Component {
    render() {
        return (
            <Text>{this.props.name}</Text>
        );
    }
}

class LotsOfGreetings extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <Greeting name="Jillian"/>
                <Greeting name="Bob"/>
            </View>
        );
    }
}

//***************************************************************************************************//

//状态state
class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = {showText: true};


        // 每1000毫秒对showText状态做一次取反操作
        //方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
        // 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
        // setInterval(()=>{
        //     this.setState(previousState=>{
        //         return {showText:!previousState.showText};
        //     })
        // },1000);
    }

    render() {
        // 根据当前showText的值决定是否显示text内容
        let diaplay = this.state.showText ? this.props.showText : '';
        return (
            <Text>{diaplay}</Text>
        );
    }
}

class BlinkApp extends Component {
    render() {
        return (
            <View>
                <Blink text='I love to blink'/>
                <Blink text='Yes blinking is so great'/>
                <Blink text='Why did they ever take this out of HTML'/>
                <Blink text='Look at melook at me look at me'/>
            </View>
        );
    }
}

//***************************************************************************************************//


class LotsOfTextStyle extends Component {
    constructor(props) {
        super(props);
        this.state = {
            titleText: 'title',
            bodyText: 'body',
        };
    }

    //嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,
    //不过标题上还附加了它自己额外的样式。
    render() {
        return (
            <Text style={styles.baseText}>
                <Text style={styles.titleText}>
                    {this.state.titleText + '\n\n'}
                </Text>
                <Text numberOfLines={5}>
                    {this.state.bodyText}
                </Text>
            </Text>
        );

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    baseText: {
        fontFamily: 'Cochin',
    },
    titleText: {
        fontSize: 20,
        fontWeight: 'bold',
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
});
//***************************************************************************************************//

//flex
//React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。
class FlexDimensionsBasics extends Component {
    render() {
        return (
            // 试试去掉父View中的`flex: 1`。
            // 则父View不再具有尺寸，因此子组件也无法再撑开。
            // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
            <View style={{flex: 1}}>
                <View style={{flex: 1, backgroundColor: 'powderblue'}}/>
                <View style={{flex: 2, backgroundColor: 'skyblue'}}/>
                <View style={{flex: 3, backgroundColor: 'steelblue'}}/>
            </View>
        );
    }
};

//***************************************************************************************************//

//flexDirection
//在组件的style中指定flexDirection可以决定布局的主轴。
// 子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？
// 默认值是竖直轴(column)方向。
class FlexDirectionBasics extends Component {
    render() {
        return (
            // 尝试把`flexDirection`改为`column`看看
            <View style={{flex: 1, flexDirection: 'row'}}>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}/>
                <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}}/>
                <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}}/>
            </View>
        );
    }
};
//***************************************************************************************************//

//justifyContent
//子元素是应该靠近主轴的起始端、中间、末尾段分布、均匀分布（前后有空白）、均匀分布（前后没有空白）
// 对应的这些可选项有：flex-start、center、flex-end、space-around 以及space-between。
class JustifyContentBasics extends Component {
    render() {
        return (
            // 尝试把`justifyContent`改为`center`看看
            // 尝试把`flexDirection`改为`row`看看
            <View style={{
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'center',
            }}>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}/>
                <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}}/>
                <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}}/>
            </View>
        );
    }
};
//***************************************************************************************************//

//alignItems
//在组件的style中指定alignItems可以决定其子元素沿着次轴
// （与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。
//flex-start、center、flex-end以及stretch。
//注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。
// 以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch'才能生效。
class AlignItemsBasics extends Component {
    render() {
        return (
            // 尝试把`alignItems`改为`flex-start`看看
            // 尝试把`justifyContent`改为`flex-end`看看
            // 尝试把`flexDirection`改为`row`看看
            <View style={{
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'stretch',
            }}>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}/>
                <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}}/>
                <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}}/>

                <View style={{height: 50, backgroundColor: 'powderblue'}}/>
                <View style={{height: 50, backgroundColor: 'skyblue'}}/>
                <View style={{height: 50, backgroundColor: 'steelblue'}}/>
            </View>
        );
    }
};

//***************************************************************************************************//
//textInput
class PizzaTranslator extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ''
        };
    }

    //.map((word)=>word&&'翻译').join('')
    render() {
        return (
            <View style={{padding: 10}}>
                <TextInput
                    style={{height: 40}}
                    placeholder="请输入！"
                    onChangeText={(text) => this.setState({text})}
                />

                <Text style={{padding: 10, fontSize: 42}}>
                    {this.state.text.split('')}
                </Text>

            </View>
        );
    }
}

// class UselessTextInput extends Component{
//     constructor(props){
//         super(props);
//         this.state={
//             userName:'',
//             password:'',
//         };
//     }
//
//     render(){
//         return(
//                 <TextInput
//                     style={{height:40,borderColor:'red',borderWidth:2}}
//                     onChangeText={(text)=>this.setState({text})}
//                     value={this.state.text}
//                 />
//         );
//     }
// }

class UselessTextInput extends Component {
    render() {
        return (
            <TextInput
                {...this.props}
                // 将父组件传递来的所有props传递给TextInput;比如下面的multiline和numberOfLines
                editable={true}
                underlineColorAndroid="transparent"
                placeholderTextColor="gray"
                placeholder="请输入"
                secureTextEntry={false}
                selectionColor="skyblue"
                keyboardType="default"/>
        );
    }
}

class UselessTextInputMutiline extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: 'hello',
        };
    }

    // 你可以试着输入一种颜色，比如red，那么这个red就会作用到View的背景色样式上
    //underlineColorAndroid="transparent"来去掉底边框
    //keyboardType="numeric" 数字键盘
    // secureTextEntry={true} 输入密码密码不可见
    //selectionColor="skyblue"光标的颜色
    //numberOfLines={4} 占据4行的高度
    //multiline={true}可以多行

    render() {
        return (
            <View style={{
                backgroundColor: this.state.text,
                borderBottomColor: '#000000',
                borderBottomWidth: 1
            }}>
                <UselessTextInput
                    multiline={true}
                    numberOfLines={4}
                    onChangeText={(text) => this.setState({text})}
                    value={this.state.text}
                />
            </View>
        );
    }
}

//***************************************************************************************************//

/*
     //为什么资源文件中显示不出来？？？？？？？？
       <Text style={{fontSize:20}}> 在android 的asset目录下的图片</Text>
              <Image source={{uri:'asset:/ic_launcher.png'}}
                     style={{width: 400, height: 400}}
              />

              <Text style={{fontSize:20}}>  在android 的mipmap目录下的图片</Text>
              <Image source={{uri:'mipmap-hdpi:/ic_launcher.png'}}
                     style={{width: 400, height: 400}}
              />
*/


//ScrollView 会立即渲染所有的子元素，性能差
class ScrollViewTest extends Component {
    render() {
        return (
            <ScrollView style={{padding: 20}}>
                {/*                <Text style={{fontSize:96}}>Scroll me plz</Text>
                <Text style={{fontSize:96}}>Scroll me plz</Text>
                <Text style={{fontSize:96}}>Scroll me plz</Text>
                <Text style={{fontSize:96}}>Scroll me plz</Text>
                <Text style={{fontSize:96}}>Scroll me plz</Text>
                <Text style={{fontSize:96}}>Scroll me plz</Text>
                <Text style={{fontSize:96}}>Scroll me plz</Text>*/}

                <Text style={{fontSize: 20}}> require('./ic_launcher.png') 在当前目录下的图片</Text>
                <Image source={require('./ic_launcher.png')}
                       style={{width: 400, height: 400}}/>

                <Text style={{fontSize: 20}}> require('./img/a.png') 在img目录下的图片</Text>
                <Image source={require('./img/a.png')}
                       style={{width: 400, height: 400}}
                />

                <Text style={{fontSize: 20}}>uri:'ic_launcher' 在android 的drawable目录下的图片</Text>
                <Image source={{uri: 'ic_launcher'}}
                       style={{width: 400, height: 400}}
                />


            </ScrollView>
        );
    }
}


//***************************************************************************************************//
//FlatList
//其中的元素之间结构近似而仅数据不同。
//更适于长列表数据，且元素个数可以增删
class FlatListBasics extends Component {
    render() {
        return (
            <View style={{flex: 1, alignItems: "flex-end", padding: 10}}>
                <FlatList
                    data={
                        [
                            {key: 'a'},
                            {key: 'b'},
                            {key: 'c'},
                            {key: 'd'},
                            {key: 'e'},
                            {key: 'f'},
                            {key: 'g'},
                            {key: 'h'},
                            {key: 'i'},
                            {key: 'j'},
                            {key: 'k'},
                            {key: 'l'},
                        ]
                    }
                    renderItem={
                        ({item}) =>
                            <Text>
                                {item.key}
                            </Text>
                    }
                />
            </View>
        );
    }
}

//***************************************************************************************************//
//SectionList
class SectionListBasics extends Component {
    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    sections={[
                        {title: 'D', data: ["Devin"]},
                        {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
                        {title: 'D', data: ["Devin"]},
                        {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']}
                    ]}
                    renderItem={
                        ({item}) => <Text style={styles.item}>
                            {item}
                        </Text>
                    }
                    renderSectionHeader={
                        ({section}) => <Text style={styles.sectionHeader}>
                            {section.title}
                        </Text>
                    }
                />
            </View>
        );
    }
}

//***************************************************************************************************//
//Fetch
// class  FetchTest extends Component{
//     constructor(props){
//         super(props);
//         this.state={
//             text:''
//         };
//     }
//     render(){
//         return(
//             <Text>{this.state.text}</Text>
//         );
//     }
//     componentDidMount(){
//         this.getMoviesFromApiAsync();
//     }
//     getMoviesFromApiAsync() {
//         return fetch('https://facebook.github.io/react-native/movies.json')
//             .then((response) => response.json())
//             .then((responseJson) => {
//                 return responseJson.movies;
//             })
//             .catch((error) => {
//                 console.error(error);
//             });
//     }
//
//     async getMoviewFromApi(){
//         try {
//             let response = await fetch('https://facebook.github.io/react-native/movies.json');
//             let responseJson = await response.json();
//             return responseJson.movies;
//         }catch (error){
//             console.error(error);
//         }
//     }
// }

//***************************************************************************************************//
//导航器
import {
    StackNavigator,
    TabNavigator,
} from 'react-navigation';

class HomeScreen extends Component{
    static  navigationOptions={
        title:'Welcome',
    };
    render(){
        return <text> Hello,Navigation!</text>
    }
}
const SimpleApp=StackNavigator({
    Home:{screen: HomeScreen},
});

//引号内代表的是这个APP的名称,后面的代表的是所要显示的组件名称, 注册组件
//一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次
// AppRegistry.registerComponent('TestDemo', () => SimpleApp);
